import { getSidebarStatus, setSidebarStatus } from '@/utils/cookies'
import { Mutation, Action } from 'vuex'

export interface StateType {
  isLoading: boolean;
  isSidebarOpen: boolean;
}

export interface ModuleType {
  namespaced: boolean;
  state: StateType;
  mutations: {
    SET_IS_LOADING: Mutation<StateType>;
    TOGGLE_SIDEBAR: Mutation<StateType>;
    CLOSE_SIDEBAR: Mutation<StateType>;
  };
  actions: {
    toggleSideBar: Action<StateType, StateType>;
    closeSideBar: Action<StateType, StateType>;
    setSize: Action<StateType, StateType>;
    toggleDevice: Action<StateType, StateType>;
  };
}

const storeModel: ModuleType = {
  namespaced: true,
  state: {
    isLoading: false,
    isSidebarOpen: getSidebarStatus() !== 'closed'
  },
  mutations: {
    SET_IS_LOADING: (state, data) => {
      state.isLoading = data
    },
    TOGGLE_SIDEBAR: (state) => {
      state.isSidebarOpen = !state.isSidebarOpen
      if (state.isSidebarOpen) {
        setSidebarStatus('opened')
      } else {
        setSidebarStatus('closed')
      }
    },
    CLOSE_SIDEBAR: (state) => {
      setSidebarStatus('closed')
      state.isSidebarOpen = false
    }
  },
  actions: {
    toggleSideBar({ commit }) {
      commit('TOGGLE_SIDEBAR')
    },
    closeSideBar({ commit }) {
      commit('CLOSE_SIDEBAR')
    },
    toggleDevice({ commit }, device) {
      commit('TOGGLE_DEVICE', device)
    },
    setSize({ commit }, size) {
      commit('SET_SIZE', size)
    }
  }
}
export default storeModel
